<!DOCTYPE HTML>
<html>
	<head>
		<title>please enter your title</title>
		<meta charset="utf-8">
		<meta name="Author" content="">
		<style type='text/css'>
			*{ margin:0; padding:0;}
			
			#wrap{
				width:1200px;
				height:360px;
				margin:100px auto;
			}

			#wrap ul li{
				width:230px;
				height:360px;
				float:left;
				list-style:none;
				margin-right:12px;
				position:relative;
				overflow:hidden;
			}
			#wrap ul li img{
				display:block;
			}
			#wrap ul li .cover{
				width:230px;
				height:360px;
				position:absolute;
				top:0px;
				left:230px;
				background:url(img/new-bg.png);
			}
			#wrap ul li .cover p{
				font-size:14px;
				font-family:'Microsoft yahei';
				color:#fff;
				text-align:center;
			}
			#wrap ul li .cover p.p1{
				padding-top:160px;
			}

		</style>
	</head>
	<body>
		
		<div id="wrap">
			<ul>
				<li>
					<img src="img/1.jpg" alt="" />
					<div class='cover'>
						<p class='p1'>春夏新品 上新无限</p>
						<p>点击进入</p>
					</div>
				</li>
				<li>
					<img src="img/2.jpg" alt="" />
					<div class='cover'>
						<p class='p1'>夏装新品发布 8折起</p>
						<p>点击进入</p>
					</div>
				</li>
				<li>
					<img src="img/3.jpg" alt="" />
					<div class='cover'>
						<p class='p1'>春装特惠 买二送一</p>
						<p>点击进入</p>
					</div>
				</li>
				<li>
					<img src="img/4.jpg" alt="" />
					<div class='cover'>
						<p class='p1'>春夏新品 低至158</p>
						<p>点击进入</p>
					</div>
				</li>
				<li style="margin-right:0px;">
					<img src="img/5.jpg" alt="" />
					<div class='cover'>
						<p class='p1'>美洲野牛旗舰店</p>
						<p>商务休闲新境界</p>
					</div>
				</li>
			</ul>
		</div>

		<script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
		<script type="text/javascript">
			(function(){
				
				var $li = $('#wrap ul li');

				$li.hover(function(ev){

					move.call(this , ev , true);

				},function(ev){
					move.call(this , ev , false);
				});


				function move( ev , bool ){
					var top = $(this).offset().top;
					var bottom  = top + $(this).height();
					var left = $(this).offset().left;
					var right = left + $(this).width();

					var x = ev.pageX,
						y = ev.pageY;
					
					var sT = Math.abs(y - top),
						sB = Math.abs(y - bottom),
						sL = Math.abs(x - left),
						sR = Math.abs(x - right);
					
					var a = Math.min( sT , sB , sL , sR );

					switch ( a )
					{
						case sT:
							if ( bool )
							{
								$(this).find('.cover').css({
									left : 0,
									top : '-360px'
								}).stop().animate({
									top : 0
								},200);
							}
							else
							{
								$(this).find('.cover').stop().animate({
									top : '-360px'
								},200);
							}
							
							break;

						case sB:
							if ( bool )
							{
								$(this).find('.cover').css({
									left : 0,
									top : '360px'
								}).stop().animate({
									top : 0
								},200);
							}
							else
							{
								$(this).find('.cover').stop().animate({
									top : '360px'
								},200);
							}
							break;
						
						case sL:
							
							if ( bool )
							{
								$(this).find('.cover').css({
									top : 0,
									left : '-230px'
								}).stop().animate({
									left : 0
								},200);
							}
							else
							{
								$(this).find('.cover').stop().animate({
									left : '-230px'
								},200);
							}
							
							break;
						
						case sR:
							if ( bool )
							{
								$(this).find('.cover').css({
									top : 0,
									left : '230px'
								}).stop().animate({
									left : 0
								},200);
							}
							else
							{
								$(this).find('.cover').stop().animate({
									left : '230px'
								},200);
							}
							break;
					}
					
					//console.log( '距离顶部:'+sT+'   距离底部:'+sB+'   距离左边:'+sL+'   距离右边:'+sR )
				};

			})();
		</script>
	</body>
</html>